<template>
    <div>
        <!-- 搜索框开始 -->
        <van-search
        v-model="value"
        shape="round"
        background="#ffffff"
        @click="search()"
        placeholder="请输入搜索关键词"
      />
    <transition name="van-slide-right">
        <router-view></router-view>
    </transition>
      <div v-show="$route.path=='/'">
     <!-- 搜索框结束 -->
      <!-- 轮播图开始 -->
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item  v-for="item in lunbotu" :key="item.id" >
            <img width="100%" :src="item.image_url" alt="">
        </van-swipe-item>
      
      </van-swipe>
      <!-- 轮播图结束 -->
      <!-- 图标跳转开始 -->
      <van-grid :column-num="5">
        <van-grid-item @click="fn1(item.id)" v-for="item in tubiao" :key="item.id" :icon="item.icon_url" :text="item.name" />
      </van-grid>
      <!-- 图标跳转结束 -->
      <!-- 品牌制造商直供开始 -->
      <!-- 品牌盒子 -->
        <div id="pinpaihz">
            <!-- 品牌文字 -->
            <div id="pinpaiwz">品牌制造商直供</div>
                <!-- 品牌图片 -->
            <div id="pinpaitpj">
                <div id="pinpaitp" v-for="item in pinpai" :key="item.id" >
            
                    <img :src="item.pic_url" alt="" width="100%" id="tp" @click="fn2(item.id)">
                    <h4>{{item.name}}</h4>
                    <p>￥ {{item.floor_price | jiage()}}</p>
                </div>

            </div>
        </div>

      <!-- 品牌制造商直供结束 -->
        <!-- 新品首发开始 -->
            <div id="xinpinhz">
                <!-- 新品文字 -->
                <div id="xinpinwz">周一周四 · 新品首发</div>
                <!-- 新品图片 -->
                <div id="xinpintp">
                    <van-grid :border="false" :column-num="2">
                        <van-grid-item v-for="item in xinpin" :key="item.id">
                          <van-image :src="item.list_pic_url" @click="fn3(item.id)" />
                            <div id="xptitle">{{item.name}}</div>
                            <div id="xpjiage">￥ {{item.retail_price | jiage()}} 元</div>
                        </van-grid-item>
                        
                      </van-grid>
                </div>
            </div>
        <!-- 新品首发结束 -->
        <!-- 人气推荐开始 -->
        <div id="renqihz">
            <!-- 人气推荐文字 -->
            <div id="renqiwz">人气推荐</div>
            <!-- 人气推荐图片集 -->
            <div id="renqitpj">
                <div id="renqitp" v-for="item in renqi" :key="item.id">
                    <div id="rqleft"><img id="rqtp" :src="item.list_pic_url" alt=""></div>
                    <div id="rqright">
                        <div id="rqtitle">{{item.name}}</div>
                        <div id="rqjieshao">{{item.goods_brief}}</div>
                        <div id="rqjiage">￥ {{item.retail_price | jiage()}} 元</div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 人气推荐结束 -->
        <!-- 专题精选开始 -->
        <div id="zhuantihz">
            <div id="zhuantiwz">专题精选</div>
            <div id="zhuantitp">
                <van-swipe :loop="false" :width="300" :show-indicators="false">
                    <van-swipe-item v-for="item in zhuanti" :key="item.id">
                         <img width="300px" height="200px" :src="item.scene_pic_url" alt="">
                         <!-- 专题介绍 -->
                         <h3 id="zttitle">{{item.title}} <span id="ztjg">￥{{item.price_info | jiage()}} 元</span> </h3>
                         <!-- 专题名称 -->
                         <div id="ztmc">{{item.subtitle}}</div>
                    </van-swipe-item>
                   
                  </van-swipe>
            </div>
        </div>
        <!-- 专题精选结束 -->
        <!-- 商品分类开始 -->
        <div id="shangpinhz" v-for="item in shangpinmz" :key="item.id" >
            <div id="shangpinwz">{{item.name}}</div>
            <div id="shangpintpj">
                <van-grid :border="false" :column-num="2">
                    <van-grid-item v-for="tp in item.goodsList" :key="tp.id">
                      <van-image :src="tp.list_pic_url" @click="fn4()" />
                      <div id="sptitile">{{tp.name}}</div>
                      <div id="spjiage">￥ {{tp.retail_price | jiage()}} 元</div>
                    </van-grid-item>
                    
                  </van-grid>
            </div>
        </div>

        <!-- 商品分类结束 -->
        <v-slot></v-slot>
      </div>
 
    </div>
</template>

<script>
import vSlot from '../components/dibu.vue'

import {GetHomeList} from '../request/app.js'
export default {
    components:{
        vSlot
    },
    data() {
        return {
           
            value:'',
            // 轮播图
            lunbotu:[],
            // 图标
            tubiao:[],
            // 品牌直供商
            pinpai:[],
            // 新品首发
            xinpin:[],
            // 人气推荐
            renqi:[],
            // 专题精选
            zhuanti:[],
            // 商品名字列表
            shangpinmz:[],
          
        };
    },
    created(){
        GetHomeList().then(res=>{
            // console.log(res);
            // 轮播图
            this.lunbotu = res.data.banner
            // 图标
            // console.log(res.data.channel);
            this.tubiao = res.data.channel
            // console.log(res.data.brandList);
            this.pinpai = res.data.brandList
            this.xinpin = res.data.newGoodsList
            this.renqi = res.data.hotGoodsList
            this.zhuanti = res.data.topicList
            this.shangpinmz = res.data.categoryList
    
        })
        
    },
    filters:{
        jiage:function(value){
            let val=''
      if(!isNaN(value) ){
        if(value %1==0){//整数
          val=value+".00"
        }
     
        else{//小数
          val=parseFloat(value).toFixed(2)
        }
      }
      return val
        }
    },  
    mounted() {
        
    },

    methods: {
        fn1(id){
            // console.log(id);
            this.$router.push('/icontiaozhuan/'+id)
        },
        fn2(id){
            this.$router.push('/pinpaixiangxi/'+id)
        },
        fn3(id){

            this.$router.push('/xinpinshoufa/'+id)
        },
        fn4(){
            this.$router.push('/404')
        },
        search(){
            // console.log(1);
            this.$router.push('/index/popup')
        }
    },
};
</script>

<style scoped>




/*搜索框样式开始*/
.my-swipe{
    width: 375px;
    height: 200px;

}
.my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    background-color: #39a9ed;
  }
/*搜索框样式结束*/
/*品牌制造商直供开始*/
  /*品牌盒子*/
  #pinpaihz{
    margin-top: 20px;
    width: 100%;
 }
  /*品牌文字*/
  #pinpaiwz{
    font-size: 20px;
    width: 100%;
    height: 50px;
    background-color: #fff;
    line-height: 50px;
    text-align: center;
  }

/*品牌图片集*/
#pinpaitpj{
    width: 100%;
    height:240px ;
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;

}
#pinpaitp{
    width: 180px;
    height: 100px;
    position: relative;
}
h4{
    font-size: 2px;
    position: absolute;
    margin-top: -110px;
    margin-left: 10px;
}
p{
    font-size: 4px;
    position: absolute;
    margin-top: -80px;
    margin-left: 10px;
    color: brown;
}
/*品牌制造商直供结束*/
/*新品首发开始*/
#xinpinhz{
    margin-top: 20px;
    width: 100%;
}
#xinpinwz{
    font-size: 20px;
    width: 100%;
    height: 50px;
    background-color: #fff;
    line-height: 50px;
    text-align: center;

}
#xptitle{
    font-size: 15px;
}
#xpjiage{
    font-size: 12px;
    color: brown;

}
/*新品首发结束*/
/*人气推荐开始*/
#renqihz{
    margin-top: 20px;
    width: 100%;
   
}
#renqiwz{
    
    font-size: 20px;
    width: 100%;
    height: 50px;
    background-color: #fff;
    line-height: 50px;
    text-align: center;
}
#rqtp{
    width: 88px;
    height: 88px;
    display: block;
}
#rqtitle{
    width: 210px;
    font-size: 18px;
    margin-bottom: 18px;
    margin-left:-15px ;

}
#rqjieshao{
    width: 200px;
    font-size: 12px;
    margin-bottom: 18px;
    margin-left:-15px ;


}
#rqjiage{
    font-size: 12px;
    margin-left:-15px ;
    color: brown;
}
#rqleft{
    width: 130px;
    height: 100px;
    float: left;
    margin-left: 20px;
    margin-top: 20px;
}
#rqright{
    width: 120px;
    height: 100px;
    float: right;
    margin-right:100px ;
    margin-top: 20px;
}
#renqitp{
    width: 100%;
    height: 104px;
    
}
#renqitpj{
    height: 400px;
    background-color: #fff;
}

/*人气推荐结束*/
/*专题精选开始*/
#zhuantihz{
     margin-top: 100px;
    width: 100%;
  
}
#zhuantiwz{
    font-size: 20px;
    width: 100%;
    height: 50px;
    background-color: #fff;
    line-height: 50px;
    text-align: center;
   
}
#zttitle{
    font-size: 15px;
    margin-top: -5px;
    margin-bottom: 10px;
}
#ztmc{
    font-size: 10px;
}
#ztjg{
    font-size: 15px;
    color: brown;
}
/*专题精选结束*/
/*商品盒子开始*/


#shangpinwz{

 font-size: 20px;
    width: 100%;
    height: 50px;
    background-color: #fff;
    line-height: 50px;
    text-align: center;
   

}
#sptitile{
  
    width: 150px;
    height: 23px;
    font-size: 15px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
}
#spjiage{
    font-size: 12px;
    color: brown;
}

/*商品盒子结束*/
</style>